function switchTab(){
    var tabSeesion=$(".table-session");
    var tabFriend=$(".table-friend");
    var sessionList=$("#session-list");
    var friendList=$("#friend-list");
    //  会话列表点击时触发: 好友列表图像变灰 会话列表图像变绿
    //下方列表变成会话列表
    $('document').ready(function(){
        tabSeesion.click(function(){
            tabSeesion.css("background-image","url(img/dialog.png)");
            tabFriend.css("background-image","url(img/user2.png)");
            sessionList.show();
            friendList.hide();
        });
        tabFriend.click(function(){
            tabSeesion.css("background-image","url(img/dialog2.png)");
            tabFriend.css("background-image","url(img/user.png)");
            sessionList.hide();
            friendList.show();
        });
        
    });
    
}
switchTab();
let webSocket;
//与服务器建立websocket连接
function makeWebsocket(){
    webSocket=new WebSocket("ws://"+ location.host+"/message");
    webSocket.onopen=function(){
        console.log("websocket 建立连接!");
    }
    webSocket.onclose=function(){
        console.log("websocket 关闭连接");
    }
    webSocket.onerror=function(){
        console.log("websocket 连接异常");
    }
    webSocket.onmessage=function(e){
         //将返回消息转化成js对象
        let message=JSON.parse(e.data);
        console.log("收到消息:", message); // 添加调试日志
        if(message.type=="message"){
            handleMessage(message);
        }else if(message.type=='friendRequest'){
            handleFriendRequest(message);
        }else if(message.type=='file'){
            handleFileMessage(message);
        }     
    }

    //绑定点击发送消息事件
    let send=$(".right .ctrl #button-send");
    send.on("click",function(){
        //当点击右侧消息栏发送时
        transferMessage(webSocket);
    });
    
    // 初始化文件上传功能
    emitFileChange(webSocket);
    
    //还是应该在创建的时候在绑定事件
    //绑定添加好友事件
    // let friendBox=$(".friends .friends-show .friendBox");
    // friendBox.on('click','button',function(){
    //     sendFriendRequest(webSocket,$(this));
    // });
}
makeWebsocket();

function sendButton(){
    var send=$("#button-send");
    $(document).ready(function(){
        send.on('mouseenter',function(){
            $(this).css("background-color","#D2D2D2");
        });
        send.on('mouseleave',function(){
            $(this).css("background-color","#E9E9E9");
        });
    });
}
//点击搜索好友时
function clickSelectFriend(){
    let select =$(".main .left .search");
    let addButton=select.find('button');
    addButton.on("click",function(){
        addFriend(select);
    });
}
clickSelectFriend();
sendButton();
//获取用户信息
function getuserInfo(){
    $.ajax({
        type:"get",
        url:"/chatRoom/getUser",
        success:function(body){
            //判断user对象是否存在且合法
            if(body && body.userId>0){
                //拿到用户的userId和username
                //username放到页面上展示
                var username=$('.main .left .name');
                username.append("<h3>"+body.username+"</h3>");
                username.attr("userId",body.uesrId);
            }else{
                //对象为空,用户还未登录,跳转登录页面
                location.assign("../login.html");
            }
        }
    })
}
getuserInfo();
function getFriendList(){
    //每次获取好友列表之前都要删除已有的好友列表以防出现重复
    var ul=$(".main .left #friend-list");
    //清空ul中的元素
    ul.empty();
    $.ajax({
        type:"get",
        url:"chatRoomUser/friendList",
        success:function(friendList){
            if(friendList.length==0){
                location.assign("login.html");
            }else{
                if(friendList.length==1 && friendList[0].friendId==0){
                    alert("当前还没有好友,快去添加好友吧");
                }else{
                    //在这里往列表里添加好友的时候就动态绑定事件
                    for(let friend of friendList){
                        let li = $('<li>');
                        li.append("<h3>"+friend.friendName+"</h3>");
                        li.attr("friendId",friend.friendId);
                        li.on('click',function(){
                            clickFriend(friend.friendName,friend.friendId);
                        });
                        ul.append(li);
                    }
                }
            }
        },
        error:function(){
            alert("获取好友列表失败!");
        }
    })
}
getFriendList();
//先清除已有的会话列表,再获取新的会话列表,然后在给每个元素设置点击激活事件 
function clickSession(){
    var ul=$("#session-list");
    ul.empty();
    $(".right").removeClass("list-hide");
    $(".friends").addClass("list-hide");
    $.ajax({
        type:"get",
        url:"chatRoomSession/sessionList",
        success:function(sessionList){
            if(!sessionList||sessionList.length==0||sessionList[0].sessionId==0){
                // session为空
                // location.href="login.html";
                return false;
            }else{
                let ul=$("#session-list");
                
                for(let session of sessionList){
                    let li=$("<li>");
                    li.attr({"sessionId":session.sessionId,"friendId":session.friends[0].friendId});
                    li.append('<h3>'+session.friends[0].friendName+
                        '</h3>'+'<p>'+session.lastMassage+'</p>');
                        //设置点击激活事件
                        //这里要使用回调函数把this传给clickactive
                    li.on('click',function(){
                        clickActive($(this));
                        
                    });
                    ul.append(li);
                }
                
            }
        }
    })
}

clickSession();
//这个是点击会话列表里面的某个会话触发的
function clickActive(SessionLi){
    //1.设置高亮状态
    let SessionUl=$("#session-list");
    SessionUl.find('li').removeClass("selected");
    SessionLi.addClass("selected");
    //2.获取历史消息并展示到界面上 
    let sessionId=SessionLi.attr("sessionId")
    getHistoryMessage(sessionId);
    //清除已存在的界面
    $(".right").removeClass("list-hide");
    $(".friends").addClass("list-hide");
};

function getHistoryMessage(sessionId){
    //1.清空已有的title标签和对话框内历史消息
    titleDiv=$(".right .title");
    titleDiv.empty();
    messageShowDiv=$(".right .massage-show");
    messageShowDiv.empty();
    //2.将选中的会话列表的freindName放到title中
    li=$(".selected");
    titleDiv.text(li.find('h3').text());
    //3.向服务器发起请求,拿到历史消息
    $.ajax({
        type:"get",
        url:"chatRoomMessage/getMessages?sessionId="+sessionId,
        success:function(messages){
            //先判断历史消息是不是空的
            if(messages&&messages.length>=1){
                //遍历message,构造消息块并添加到右侧展示框中
                for(let message of messages){
                    // 检查消息类型，根据type字段区分文件消息和普通消息
                    if(message.type === 'file'){
                        // 如果是文件消息，使用文件气泡显示
                        addFileMessage(messageShowDiv, message);
                    } else {
                        // 普通文本消息
                        addMessage(messageShowDiv,message);
                    }
                }
                //将消息添加完后,要将消息栏滚动到最底下
                scrollToBottom(messageShowDiv);
            }else{
                console.log("历史消息为空");
            }
            
        },
        error:function(){
            alert("获取历史消息失败");
        }
    })
}




//如果服务器返回的是message类型
function handleMessage(message){
    //服务器返回响应
        //1.判断该消息所属的会话是否在左侧已经存在,若不存在则创建一个新的会话
        let li=findLiBySessionId(message);
        if(!li){
            let new_li=$("<li>");
            new_li.attr("sessionId",message.sessionId);
            //这里先不填写消息,后面统一填写
            new_li.append("<h3>"+message.fromName+"</h3>"+"<p>"+"</p>");
            //记得添加点击事件
            new_li.on("click",function(){
                //1.设置高亮状态
                $("#session-list").find('li').removeClass("selected");
                $(this).addClass("selected");
                //2.获取历史消息
                getHistoryMessage($(this).attr("sessionId"));
                //收到消息后跳转到会话列表界面
                clickSession();
            });
            li=new_li;
        }

        //2.判断该消息是否超过十个字符,若超过则截取10个
            let p=li.find('p');
            p.text(message.content);
            if(p.text().length>10){
            p.text(p.text().substring(0,10));
        }
        //3.接着判断这个会话是否被选中,如果选中则展示到右侧对话框
        if(li && li.is($(".left .list .selected"))){
            addMessage($(".right .massage-show"),message);
            scrollToBottom($(".right .massage-show"));
        }
        //4.收到消息的会话,放在列表的最上面
        let sessionUl =$("#session-list");
        sessionUl.prepend(li);

        console.log("websocket 接受消息");
        //这里还可以实现新收到消息的会话列表提示小红点,群聊功能等
}

//如果服务器返回的是file类型
function handleFileMessage(message){
    //服务器返回文件消息响应
    //1.判断该消息所属的会话是否在左侧已经存在,若不存在则创建一个新的会话
    let li=findLiBySessionId(message);
    if(!li){
        let new_li=$("<li>");
        new_li.attr("sessionId",message.sessionId);
        //这里先不填写消息,后面统一填写
        new_li.append("<h3>"+message.fromName+"</h3>"+"<p>"+"</p>");
        //记得添加点击事件
        new_li.on("click",function(){
            //1.设置高亮状态
            $("#session-list").find('li').removeClass("selected");
            $(this).addClass("selected");
            //2.获取历史消息
            getHistoryMessage($(this).attr("sessionId"));
            //收到消息后跳转到会话列表界面
            clickSession();
        });
        li=new_li;
    }

    //2.判断该消息是否超过十个字符,若超过则截取10个
    let p=li.find('p');
    p.text("[文件] " + message.content);
    if(p.text().length>10){
        p.text(p.text().substring(0,10));
    }
    
    //3.接着判断这个会话是否被选中,如果选中则展示到右侧对话框
    if(li && li.is($(".left .list .selected"))){
        addFileMessage($(".right .massage-show"),message);
        scrollToBottom($(".right .massage-show"));
    }
    //4.收到消息的会话,放在列表的最上面
    let sessionUl =$("#session-list");
    sessionUl.prepend(li);

    console.log("websocket 接受文件消息");
}
//如果服务器相应的是好友请求
//在线情况下,好友请求是挨个处理的,而刚上线是可能要处理多个好友请求
function handleFriendRequest(message){
    //新建一个li标签来存储好友请求
    let requestLi=$("<li>");
    let sessionUl=$(".main .left #session-list");
    requestLi.addClass("requestMessage");
    requestLi.attr("userId",message.fromId);
    let content=message.content.trim();
    let name=message.fromName.trim();
    if(content.length>=20){
        content=content.substring(0,20)+"...";
    }
    if(name.length>7){
        name=name.substring(0,8)+"...";
    }
    requestLi.append("<div class='request-left'><h3>"+name+"</h3>"+"<p>"+content+"</p></div>"+"<button class='rejust'></button>"+
        "<button class='agree'></button>");
    //给接受与拒绝按钮注册事件
    requestLi.on("click",".rejust",function(){
        //处理好友请求
        handleButton($(this).closest("li"),0);
    });
    requestLi.on("click",".agree",function(){
        //处理好友请求
        handleButton($(this).closest("li"),1);
    });
    sessionUl.prepend(requestLi);   
}


//处理好友请求
function handleButton(requestLi,status){
    //这里偷个懒,不管是拒绝还是同意都不会再返回给添加好友的人提示了
    //所以直接使用ajax请求
    $.ajax({
        type:"post",
        url:"/chatRoomUser/clearFriendRequest",
        data:{
            userId:requestLi.attr("userId"),
            status:status
        },
        success:function(){
            console.log("处理好友请求成功!");  
        },
        error:function(){
            console.log("处理好友请求失败!");  
        }
        
    })
    if(status==0){alert("已拒绝好友请求");}
    else{
        alert("添加好友成功!记得刷新一下网页");
    }
    //处理完之后记得把这个好友请求从左侧删除
    requestLi.remove();
}

//判断某个消息所属的会话是否已经创建
function findLiBySessionId(message){
    let sessionUl= $(".left #session-list");
    let ret=null;
    sessionUl.find("li").each(function(){
        if($(this).attr("sessionId").trim()==message.sessionId){
            ret=$(this);
            return false;
        }
    })
    return ret;
}

//消息传输
function transferMessage(webSocket){
    //消息传输模块实现三步骤:
    //1.客户端给服务器发起请求
        //获取输入框里面的内容
        let message=$("#send").val();
        let selected=$(".main .left #session-list .selected");
        //判断内容是否为空或者session列表没有选择任何会话,就不发送
        if(!message||!selected){
            return;
        }
        //消息不为空,获取到对话的sessionId用于构建请求
        let sessionId=selected.attr("sessionId");
        //构造请求
        let jsData={
            type:"message",
            sessionId:sessionId,
            content:message
        };
        //由于Websocket协议没有帮我们处理转化 所以要手动的将请求转化成json字符串格式
        let JsonData=JSON.stringify(jsData);
        //发送请求,前端这里直接将字符串当做参数就行,后端的话还要new 一个对象
        webSocket.send(JsonData);
        //别忘了清空输入框
        $("#send").val("");
    //2.服务器接受并转发请求(将消息存储到数据库)
    //3.服务器将该消息发回给sessionId内的所有客户端
}

//将右侧消息栏滚动到最底部
function scrollToBottom(messageShowDiv){
    let offsetHeight=messageShowDiv[0].offsetHeight;
    let realHeight=messageShowDiv[0].scrollHeight;
    messageShowDiv.scrollTop(realHeight-offsetHeight);
}

// 将消息挨个构造并添加到右侧框中
function addMessage(messageShowDiv,message){
    let messageBlock= $("<div>");
    messageBlock.addClass('massage');
    //如果消息是本人发的,添加class message-right,否则添加 message-left
    if(message.fromName==$(".main .left .name").text()){
        
        messageBlock.addClass('massage-right');
    }else{
        messageBlock.addClass('massage-left');
    }
    let messageBox=$("<div>",{class:"box"});
    messageBox.append("<h4>"+message.fromName+"</h4>"+"<p>"+message.content+"</p>");
    messageBlock.append(messageBox);
    messageShowDiv.append(messageBlock);
}

// 将文件消息构造并添加到右侧框中
function addFileMessage(messageShowDiv,message){
    let messageBlock= $("<div>");
    messageBlock.addClass('massage');
    //如果消息是本人发的,添加class message-right,否则添加 message-left
    if(message.fromName==$(".main .left .name").text()){
        messageBlock.addClass('massage-right');
    }else{
        messageBlock.addClass('massage-left');
    }
    
    // 从文件名推断文件类型和大小
    const fileName = message.content;
    const fileExtension = fileName.split('.').pop().toLowerCase();
    let fileType = '';
    let fileSize = 0;
    
    // 根据文件扩展名设置文件类型
    if(['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(fileExtension)) {
        fileType = 'image/' + fileExtension;
    } else if(['pdf'].includes(fileExtension)) {
        fileType = 'application/pdf';
    } else if(['doc', 'docx'].includes(fileExtension)) {
        fileType = 'application/msword';
    } else if(['xls', 'xlsx'].includes(fileExtension)) {
        fileType = 'application/vnd.ms-excel';
    } else if(['zip', 'rar', '7z'].includes(fileExtension)) {
        fileType = 'application/zip';
    } else {
        fileType = 'application/octet-stream';
    }
    
    // 创建文件气泡（接收方显示为已完成状态）
    let fileBubble = displayFileBubble(fileName, fileType, fileSize, false, true);
    
    // 为文件气泡添加点击下载事件
    fileBubble.off('click').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        console.log("点击下载文件:", fileName);
        downloadFile(fileName);
    });
    
    messageBlock.append(fileBubble);
    messageShowDiv.append(messageBlock);
}

//点击好友列表中的好友后在会话列表创建一个新的会话
function clickFriend(friendName,friendId){
    $(".right").removeClass("list-hide");
    $(".friends").addClass("list-hide");
    //遍历session列表看看有没有friendName,
    let sessionUl=$("#session-list");
    let sessionLi=$("#session-list li");
    let is_exists=false;
    let tarLi;
    sessionLi.each(function(){
        if($(this).find("h3").text().trim()==friendName){ 
            is_exists=true;
            tarLi=$(this);
        }
    });
    if(is_exists){
        //1.如果该会话已创建则将该回话移动至顶端并将其设为高亮并切换到会话页面
        sessionUl.prepend(tarLi);
        tarLi.click();
        // clickActive(tarLi.attr("sessionId"));
        $(".table-session").click();
    }
    else{
        //2.如果该回话未创建,则创建新的li标签并告知服务器将sessionId返回并设置到li标签中
        let new_li=$("<li>");
        //此处是新的会话,没有最后一条消息
        new_li.append("<h3>"+friendName+"</h3>"+"<p></p>");
        //获取sessionId
        $.ajax({
            type:"post",
            url:"chatRoomSession/createSession",
            data:{'friendId':friendId},
            success:function(sessionIds){
                let sessionId=sessionIds.sessionId;
                new_li.attr("friendId",friendId);
                new_li.attr("sessionId",sessionId);
                //记得为新创建的元素添加点击事件
                new_li.on("click",function(){
                    //1.设置高亮状态
                    sessionUl.find('li').removeClass("selected");
                    $(this).addClass("selected");
                    getHistoryMessage($(this).attr("sessionId"));
                    $(".table-session").click();
                });
                sessionUl.prepend(new_li);
                new_li.click();
            },
            error:function(){
                console.log("获取新的sessionId失败!");
            }
        })

       
    }
}
//添加好友功能(拓展)
function addFriend(select){
    
    //点击搜索好友时,先获取到输入框中的内容,如果为空则不操作
    let input = select.find("input");
    if(input.val().trim()==""){
        alert("输入不能为空");
        return false;
    }

    $(".main .right").addClass("list-hide");
    $(".main .friends").removeClass("list-hide");
    //在添加之前,先把历史记录清空
    $(".main .friends .friends-show").empty();
    //进行搜索
    //此时右侧将不在是聊天框,要切换成搜索结果框,这里用隐藏和显示的方式
    $.ajax({
        type:"get",
        url:"chatRoomUser/addFriend?friendName="+input.val(),
        success:function(friends){
            let errorShow=$(".main .friends .error");
            let friendsShow=$(".main .friends .friends-show");
            //判断返回结果是否为空
            if(!friends||friends.length==0){
                friendsShow.addClass("list-hide");
                errorShow.removeClass("list-hide");
                return ;
            }else{
                //返回结果不为空
                friendsShow.removeClass("list-hide");
                errorShow.addClass("list-hide");
                //获取到多个返回结果,挨个展示到右侧消息框中
                for(let friend of friends){
                    let friendBox=$("<div>");
                    friendBox.addClass("friendBox")
                    friendBox.attr("friendId",friend.friendId);
                    friendBox.append("<h3>"+friend.friendName+"</h3>"+"<input type='text' placeholder='请输入添加好友的理由'>"
                    +"<button class='send-request'>添加</button>");
                    //为好友列表里面的添加按钮注册点击事件
                    //此处的绑定放到websocket中,因为要传一个websocket对象
                    // friendBox.on('click','button',function(){
                    //     sendFriendRequest($(this));
                    // });
                    //还是应该在创建的时候在绑定事件
                    //绑定添加好友事件
                    // let friendBox=$(".friends .friends-show .friendBox");
                    friendBox.on('click','button',function(){
                        sendFriendRequest(webSocket,$(this).closest(".friendBox"));
                    });
                    friendsShow.append(friendBox);
                }
            }
            
        }
    })
};
//点击添加好友按钮后
function sendFriendRequest(webSocket,friendBox){
    let input =friendBox.find("input").val();
    if(!input){
        input="好友添加";
    }
    //注意要使用websocket来发请求,才能实现对方对请求的实时接收
    //向服务器发请求传递好友请求
    let fid=friendBox.attr("friendId");
    let jsData={
        friendId:fid,
        content:input,
        type:"friendRequest"
    };
    //转化成json格式字符串
    let jsonData=JSON.stringify(jsData);
    //发请求
    webSocket.send(jsonData);
    alert("发送好友请求成功");
};

//还要处理好友不在线,从数据库中获取好友请求
//这里好友更新不是实时的,因为用的不是websocket
function getFriendRequest(){
    $.ajax({
        type:'get',
        url:"chatRoomUser/getFriendRequest",
        success:function(friendRequests){
            if(!friendRequests||friendRequests.length==0){
                //没有好友请求
                return false;
            }
            for(let friendRequest of friendRequests){
                //添加好友请求到左侧session-list
                handleFriendRequest(friendRequest);
            }
        }
    })
}
getFriendRequest();
const emojis=["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
"🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚",
"😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🥸",
"🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️",
"😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡"];

function initEmoji(){
    const panel=$("#emoji-panel");
    panel.empty();
    //创建表情网格
    const grid=$("<div class='emoji-grid'></div>");
    grid.css({
        display:"grid",
        gridTemplateColumns:"repeat(12,1fr)",
        gap:'5px'
    });
    //添加表情
    console.log("加载表情");
    
    emojis.forEach((emoji)=>{
        const emojiBtn=$("<button class='emoji-item'></button>")
        emojiBtn.text(emoji);
        emojiBtn.addClass("emoji-item");
        emojiBtn.click(()=>{
            insertEmoji(emoji);
        })
        grid.append(emojiBtn);
    });
    panel.append(grid);
}
function emitEmoji(){
    //注册点击按钮加载表情设置
    $("#emoji-btn-first").click(()=>{
        const panel =$("#emoji-panel");
        if(panel.is(':visible')){
            //当前表情栏是打开状态
            console.log("打开状态关闭");
            
            panel.hide();
        }else{
            initEmoji();
            panel.show();
            console.log("关闭状态打开");
        }
    })
    //注册点击其他地方关闭事件
    $(document).click((e)=>{
        if(!$(e.target).closest('#emoji-panel,#emoji-btn-first,#emoji-btn').length){
            $("#emoji-panel").hide();
        }
    })
}
emitEmoji();
function insertEmoji(emoji){
    const input=$("#send");
    const cursorPos=input[0].selectionStart;
    const text=input.val();
    input.val(text.substring(0,cursorPos)+emoji+text.substring(cursorPos));
    //更新光标位置
    input[0].selectionStart=cursorPos+emoji.length;
    input[0].selectionEnd=cursorPos+emoji.length;
    input.focus();
}
//文件功能
function emitFileChange(webSocket){
    $("#fileInput").on("change",function(){
        const file = this.files[0];
        if(!file) return;
        
        // 显示文件气泡（只显示一个，不重复显示）
        const messageBlock = $("<div>");
        messageBlock.addClass('massage massage-right');
        const fileBubble = displayFileBubble(file.name, file.type, file.size, true, false);
        messageBlock.append(fileBubble);
        $(".right .massage-show").append(messageBlock);
        scrollToBottom($(".right .massage-show"));
        
        // 上传文件
        fileUpload(file, fileBubble, webSocket);
        
        // 清空文件输入框，避免重复选择同一文件
        $(this).val('');
    });
}
function fileUpload(file, fileBubble, webSocket){
    const progressBar = fileBubble.find(".progress-bar");
    const progressText = fileBubble.find(".progress-text");
    const fileSizeMB = (file.size/(1024*1024)).toFixed(2);
    
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);
    
    // 监听上传进度事件
    xhr.upload.addEventListener('progress', function(event){
        if(event.lengthComputable){
            const percent = Math.round((event.loaded/event.total)*100);
            updateProgress(percent, event.loaded, event.total);
        }
    });
    
    xhr.addEventListener('load', function(){
        if(xhr.status === 200){
            try {
                const response = JSON.parse(xhr.responseText);
                handleUploadSuccess(response, webSocket, fileBubble);
            } catch(e) {
                handleUploadError(fileBubble);
            }
        } else {
            handleUploadError(fileBubble);
        }
    });
    
    xhr.addEventListener('error', function(){
        handleUploadError(fileBubble);
    });
    
    xhr.open("POST", "/file/upload");
    xhr.send(formData);
    
    function updateProgress(percent, loaded, total){
        progressBar.css("width", percent + "%");
        const uploadMB = (loaded/(1024*1024)).toFixed(2);
        progressText.text(`上传中 ${percent}% (${uploadMB}MB/${fileSizeMB}MB)`);
        if(percent === 100){
            setTimeout(()=>{
                fileBubble.addClass("completed");
                progressText.text("上传完成");
            }, 300);
        }
    }
    
    function handleUploadSuccess(response, webSocket, fileBubble){
        if(response && response.content){
            // 上传成功，通过WebSocket通知其他用户
            transferFile(webSocket, response.content);
            // 更新文件气泡状态，显示为可下载状态
            fileBubble.addClass("completed");
            fileBubble.find(".progress-container").hide();
            fileBubble.find(".progress-text").hide();
            fileBubble.find(".upload-complete").show().text("点击下载");
            
            // 为发送者的文件气泡添加点击下载事件
            fileBubble.off('click').on('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                downloadFile(response.content);
            });
            
            showDownloadMessage(`文件 "${file.name}" 上传成功`);
        } else {
            handleUploadError(fileBubble);
        }
    }
    
    function handleUploadError(fileBubble){
        fileBubble.find(".progress-text").text("上传失败");
        showDownloadMessage(`文件 "${file.name}" 上传失败`);
    }
}
function realFileUpload(file, fileBubble) {
    const progressBar = fileBubble.find('.progress-bar');
    const progressText = fileBubble.find('.progress-text');
    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(1);
    
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

    // 监听上传进度事件
    xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            const percent = Math.round((event.loaded / event.total) * 100);
            updateProgress(percent, event.loaded, event.total);
        }
    });

    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            handleUploadSuccess(JSON.parse(xhr.response));
        } else {
            handleUploadError();
        }
    });

    xhr.open('POST', 'http://localhost:8080/file/upload', true);
    xhr.send(formData);

    function updateProgress(percent, loaded, total) {
        progressBar.css('width', percent + '%');
        const uploadedMB = (loaded / (1024 * 1024)).toFixed(1);
        progressText.text(`上传中: ${percent}% (${uploadedMB}MB/${fileSizeMB}MB)`);
        
        if (percent === 100) {
            setTimeout(() => {
                fileBubble.find('.file-bubble').addClass('completed');
            }, 300);
        }
    }

    function handleUploadSuccess(response) {
        showSystemMessage(`文件 "${file.name}" 已安全上传`);
        sendFileNotification(file.name, response.fileId, file.size);
    }

    function handleUploadError() {
        progressText.text('上传失败');
        showSystemMessage(`文件 "${file.name}" 上传失败`);
    }
}
//显示文件气泡
function displayFileBubble(name,type,size,isSent,isComplete){
    //计算文件大小(MB)
    const sizeMB = size > 0 ? (size/(1024*1024)).toFixed(2)+"MB" : "";
    //获取文件图标列名
    const iconClass = getFileIconClass(type);
    //创建文件气泡
    const bubble = $(`<div class="file-bubble ${isComplete?"completed":""}">
                        <div class="file-icon">
                            <i class="fas ${iconClass}"></i>
                        </div>
                        <div class="file-info">
                            <div class="file-name">${name}</div>
                            <div class="file-size">${sizeMB}</div>
                            <div class="progress-container" style="display: ${isComplete ? 'none' : 'block'}">
                                <div class='progress-bar' style="width: ${isComplete?"100":'0'}%"></div>
                            </div>
                            <div class="progress-text" style="display: ${isComplete ? 'none' : 'block'}">${isComplete?"文件已发送":"上传文件中"}</div>
                            <div class="upload-complete" style="display: ${isComplete ? 'block' : 'none'}">
                                <i class="fas fa-download"></i>
                                ${isComplete ? "点击下载" : "上传完成"}
                            </div>
                        </div>
                    </div>`);
    return bubble;
}
function getFileIconClass(fileType){
    if(!fileType)return 'fa-file';
    fileType=fileType.toLowerCase();
    if(fileType.includes("image"))return 'fa-file-image';
    if(fileType.includes('pdf'))return 'fa-file-pdf';
    if(fileType.includes('zip')||fileType.includes('rar'))return 'fa-file-archive';
    if(fileType.includes('word'))return 'fa-file-word';
    if(fileType.includes('excel'))return 'fa-file-excel';
    if(fileType.includes("powerpoint"))return 'fa-file-powerpoint';
    if(fileType.includes("video"))return 'fa-file-video';
     if(fileType.includes("audio"))return 'fa-file-audio';
      if(fileType.includes("text")||fileType.includes("csv"))return 'fa-file-alt';
      return 'fa-file';
}
function transferFile(websocket ,fileName){
    const selectedSession=$(".main .left #session-list .selected");
    const sessionId=selectedSession.attr("sessionId");
    let data={
        type:"file",
        content:fileName,
        sessionId:sessionId
    };
    data=JSON.stringify(data);
    websocket.send(data);
}

// 下载文件功能
function downloadFile(fileName){
    if(!fileName){
        alert("文件名不能为空");
        return;
    }
    
    // 显示下载提示
    showDownloadMessage(`正在下载文件: ${fileName}`);
    
    // 向服务器请求下载URL
    $.ajax({
        type: "get",
        url: "/file/download",
        data: {
            fileName: fileName
        },
        success: function(response){
            console.log("下载响应:", response);
            if(response && response.content){
                // 创建临时链接进行下载
                const link = document.createElement('a');
                link.href = response.content;
                link.download = fileName;
                link.target = '_blank';
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                showDownloadMessage(`文件下载成功: ${fileName}`);
            } else {
                showDownloadMessage(`下载失败: 无法获取下载链接`);
            }
        },
        error: function(xhr, status, error){
            console.error("下载错误:", xhr, status, error);
            showDownloadMessage(`下载失败: 网络错误`);
        }
    });
}

// 显示下载消息
function showDownloadMessage(message){
    // 创建一个临时的消息提示
    const messageDiv = $(`<div class="download-message">${message}</div>`);
    messageDiv.css({
        position: 'fixed',
        top: '20px',
        right: '20px',
        background: '#4CAF50',
        color: 'white',
        padding: '10px 15px',
        borderRadius: '5px',
        zIndex: '9999',
        boxShadow: '0 2px 10px rgba(0,0,0,0.2)'
    });
    
    $('body').append(messageDiv);
    
    // 3秒后自动移除
    setTimeout(function(){
        messageDiv.fadeOut(function(){
            $(this).remove();
        });
    }, 3000);
}


